import {DatePicker} from "antd";
import React from "react";
import BaseComponent from "../../../redare/components/BaseComponent";
import locale from "antd/es/date-picker/locale/zh_CN";
import ReactDOM from "react-dom";
import 'moment/locale/zh-cn';

export default class DoubleDate extends BaseComponent {

  dateObj = {};

  constructor(props){
    super(props);
    this.calendarContainer = props.calendarContainer;
  }

  componentDidMount(){

  }

  state = {
    startValue: null,
    endValue: null,
    endOpen: false,
  };

  // 重置
  restData(){
    this.dateObj = {};
    this.setState({startValue: null, endValue: null});
  }

  onChange = (field, moment, value) => {
    this.dateObj[field] = value;
    this.setState({
      [field]: moment,
    });
  };

  onStartChange = (moment, value) => {
    this.onChange('startValue', moment, value);
  };

  onEndChange = (moment, value) => {
    this.onChange('endValue', moment, value);
  };

  disabledStartDate = startValue => {
    const { endValue } = this.state;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  };

  disabledEndDate = endValue => {
    const { startValue } = this.state;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  };


  render() {

    return (
      <div ref={(the)=>{ this.calendarContainer = the }} className={"flex"}>
        <DatePicker
          {...this.props}
          disabledDate={this.disabledStartDate}
          locale={locale}
          placeholder="开始时间"
          value={this.state.startValue}
          onChange={this.onStartChange}
          getCalendarContainer={() => ReactDOM.findDOMNode(this.calendarContainer)}
        />
        <DatePicker
          {...this.props}
          style={{marginLeft: '10px'}}
          disabledDate={this.disabledEndDate}
          locale={locale}
          placeholder="结束时间"
          value={this.state.endValue}
          onChange={this.onEndChange}
          getCalendarContainer={() => ReactDOM.findDOMNode(this.calendarContainer)}
        />
      </div>
    );

  }
}